/* eslint no-unused-expressions: 0 */
import React, { Component } from 'react';
import { Dialog, Input, Select, Grid, Message, Radio } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import DialogDecorator from './DialogDecorator';
import axios from '../../../../instances/request';

const { Col, Row } = Grid;

class UserControlFormDialog extends Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: props.visible,
      value: props.value,
      __loading: true,
      groupDataSource: [],
    };
  }

  onFormChange = (value) => {
    this.setState({
      value,
    });
  };

  onOkHandler = () => {
    this.refs.form.validateAll((errors, values) => {
      if (errors) {
        console.log('errors', errors);
        return;
      }
      this.props.onOk && this.props.onOk(this.state.value);
    });
  };

  async getAllUserGroups() {
    let res = await axios
      .post('/superuser/group/list',{
        limit: -1,
        page: 1,
      })
      .catch((err) => {
        Message.error(`获取全部用户分组列表接口${err}`);
        return Promise.reject(err);
      });

    let { code, msg } = res.data;
    switch (code) {
      case 0:
        let { groupList } = msg;
        let dataSource = Array.from(groupList).map((ele, idx) => {
          return  {
            label: ele.groupname,
            /*
            * todo: 这里value为undefined竟然不报错，还能正确运行，只是value变成了string，应该是Table自动处理了，莫名其妙把GroupId属性赋给了Select
             */
            value: ele.id,
          };
        });
        this.setState({
          groupDataSource: dataSource,
        });
        break;
      default:
        // Message.error(msg.error);
        return;
    }
  }

  componentDidMount() {
    this.getAllUserGroups();
  }

  render() {
    return (
      <Dialog
        isFullScreen={true}
        title="编辑数据"
        onClose={this.props.onClose}
        onCancel={this.props.onCancel}
        afterClose={this.props.afterClose}
        onOk={this.onOkHandler}
        visible={this.state.visible}
        style={{ width: 500 }}
      >
        <IceFormBinderWrapper
          value={this.state.value}
          onChange={this.onFormChange}
          ref="form"
        >
          <div>
            <Row style={styles.row}>
              <Col span={8}>
                <span style={styles.label}>用户登录名</span>
              </Col>
              <Col span={16}>
                <IceFormBinder
                  required
                  name="username"
                  message="登录名必填"
                >
                  <Input
                    autoComplete={'new-password'}
                    style={styles.formField}
                    placeholder={ '用户登录名' }
                    trim={true}
                  />
                </IceFormBinder>
                <IceFormError name="username" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={8}>
                <span style={styles.label}>用户登录密码</span>
              </Col>
              <Col span={16}>
                <IceFormBinder
                  required={! this.state.value.id }
                  name="password"
                  message='密码必须填写'
                >
                  <Input
                    htmlType='password'
                    autoComplete={'new-password'}
                    style={styles.formField}
                    placeholder={ this.state.value.id ? '为空则不修改' : '用户登录密码' }
                    trim={true}
                  />
                </IceFormBinder>
                <IceFormError name="password" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={8}>
                <span style={styles.label}>手机</span>
              </Col>
              <Col span={16}>
                <IceFormBinder
                  name="phone"
                  message='手机号不合法'
                  pattern={new RegExp(/^1([38]\d|5[0-35-9]|7[3678])\d{8}$/, 'gi')}
                >
                  <Input
                    style={styles.formField}
                    placeholder="手机号，可为空"
                    trim={true}
                  />
                </IceFormBinder>
                <IceFormError name="phone" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={8}>
                <span style={styles.label}>邮箱</span>
              </Col>
              <Col span={16}>
                <IceFormBinder
                  name="email"
                  message='邮箱不合法'
                  pattern={new RegExp(/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/, 'gi')}
                >
                  <Input
                    style={styles.formField}
                    placeholder="邮箱，可为空"
                    trim={true}
                  />
                </IceFormBinder>
                <IceFormError name="email" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={8}>
                <span style={styles.label}>描述</span>
              </Col>
              <Col span={16}>
                <IceFormBinder
                  name="description"
                >
                  <Input
                    style={styles.formField}
                    placeholder="对用户的描述，可为空"
                  />
                </IceFormBinder>
                <IceFormError name="description" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={8}>
                <span style={styles.label}>用户所属班组</span>
              </Col>
              <Col span={16}>
                <IceFormBinder
                  required
                  message="用户所属班组必选"
                  name="teamname"
                >
                  <Select style={styles.userFormSelect}>
                    <Select.Option value={'无'}>无</Select.Option>
                    <Select.Option value={'A组'}>A组</Select.Option>
                    <Select.Option value={'B组'}>B组</Select.Option>
                    <Select.Option value={'C组'}>C组</Select.Option>
                    <Select.Option value={'D组'}>D组</Select.Option>
                  </Select>
                </IceFormBinder>
                <IceFormError name="teamname" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={8}>
                <span style={styles.label}>是否是所在班组的组长</span>
              </Col>
              <Col span={16} style={{
                lineHeight: '30px'
              }}>
                <IceFormBinder
                  required
                  name="isTeamLeader"
                  message="必选"
                >
                  <Radio.Group
                    dataSource={[{
                      value: true,
                      label: '是'
                    }, {
                      value: false,
                      label: '否'
                    }]}
                  />
                </IceFormBinder>
                <IceFormError name="isTeamLeader" />
              </Col>
            </Row>
            <Row style={styles.row}>
              <Col span={8}>
                <span style={styles.label}>用户所属部门</span>
              </Col>
              <Col span={16}>
                <IceFormBinder
                  name="GroupId"
                >
                  <Select
                    dataSource={this.state.groupDataSource}
                    style={styles.userFormSelect}
                  />
                </IceFormBinder>
              </Col>
            </Row>
          </div>
        </IceFormBinderWrapper>
      </Dialog>
    );
  }
}

const styles = {
  row: {
    marginTop: '10px',
  },
  label: {
    lineHeight: '30px',
  },
  formField: {
    width: '100%',
  },
  userFormSelect: {
    width: '80%',
  }
};

export default DialogDecorator(UserControlFormDialog);
